<template>
  <div class="home">
    <!-- 疫情图片 -->
    <div class="logo">
      <img src="../../assets/images/1.jpg" width="100%" alt="">
      <!-- 点击进入城市选择 -->
      <router-link class="select" to="/selectCity">{{ city }}=</router-link>   
    </div>
    <!-- 病毒信息 -->
    <cov-info :covDesc='covDesc' :news='news'/>
    <!-- 疫情小导航 -->
     <div class="list">
       <div>
        <router-link to='/area'>
          <img src="../../assets/images/1.png" alt="">
          <div>风险地区</div>
        </router-link>
       </div>
       <div>
         <router-link to='/hesuan'>
           <img src="../../assets/images/2.png" alt="" />
           <div>核酸检测</div>
         </router-link>
       </div>
       <div>
         <router-link to="/prevention">
          <img src="../../assets/images/3.png" alt="">
          <div>防疫物资</div>
        </router-link>
       </div>
       <div>
        <router-link to="/travel">
          <img src="../../assets/images/4.png" alt="">
          <div>出行政策</div>
        </router-link>
       </div>
     </div>
     <!-- 数据统计 -->
     <cov-number :covData='covData'/>
     <!-- 中国疫情地图 -->
     <China />
     <!-- 6. 世界地图 -->
     <World />
        <!-- 7. 轮播图 -->
     <VueSwiper />
  </div>
</template>

<script>
import CovInfo from './CovInfo/CovInfo.vue'
import CovNumber from './CovInfo/CovNumber.vue'
import China from "./VueEcharts/China.vue";
import World from "./VueEcharts/World.vue";
import VueSwiper from "./VueSwiper/VueSwiper.vue";
import api from '../../api/index'
export default {
  name: 'Home',
  data() {
    return {
      covDesc: {},
      news: [],
      covData:{},
      city: "国内疫情",
    }
  },
  components: {
    CovInfo,
    CovNumber,
    China,
    World,
    VueSwiper
  },
  created() {
    //方式1：进入页面获取本地存储
    let city = localStorage.getItem('city')
    if(city){
      this.city = city+'疫情';
    }
    //请求病毒接口
    api.getCovInfo()
    .then(res => {
      console.log(res.data);
      console.log(res.data.newslist[0]);
      //病毒信息介绍
      let data = res.data.newslist[0].desc;
      this.covDesc = {
        // note1:data.note1,
        // note2:data.note2,
        // note3:data.note3,
        // remark1:data.remark1,
        // remark2:data.remark2,
        // remark3:data.remark3
        note1:'病毒:SARS-CoV-2,其导致疾病命名COVID-19',
        note2:'传染源:新冠肺炎的患者。无症状感染者也可能成为传染源。',
        note3:'传播途径:经呼吸道飞沫、接触传播是主要的传播途径。气溶胶传播和消化道等传播途径尚待明确。',
        remark1:'易感人群:人群普遍易感。老年人及有基础疾病者感染后病情较重，儿童及婴幼儿也有发病',
        remark2:'潜伏期:一般为3~7天，最长不超过14 天，潜伏期内可能存在传染性，其中无症状病例传染性非常罕见',
        remark3:'宿主:野生动物:可能为中华菊头蝠'
      }
      //疫情热点
      this.news = res.data.newslist[0].news;
      //console.log('处理好的数据',this.covDesc)
      this.covData = {
        currentConfirmedCount: data.currentConfirmedCount, //现存确诊人数
        confirmedCount: data.confirmedCount, //累计确诊人数
        suspectedCount: data.suspectedCount, //累计境外输入人数
        curedCount: data.curedCount, //累计治愈人数
        deadCount: data.deadCount, //累计死亡人数
        seriousCount: data.seriousCount, //现存无症状人数
        suspectedIncr: data.suspectedIncr, //新增境外输入人数
        currentConfirmedIncr: data.currentConfirmedIncr, //相比昨天现存确诊人数
        confirmedIncr: data.confirmedIncr, //相比昨天累计确诊人数
        curedIncr: data.curedIncr, //相比昨天新增治愈人数
        deadIncr: data.deadIncr, //相比昨天新增死亡人数
        seriousIncr: data.seriousIncr, //相比昨天现存无症状人数
        modifyTime: data.modifyTime, //截止时间
      }
    })
    /* 
      currentConfirmedCount		现存确诊人数
      confirmedCount		累计确诊人数
      suspectedCount		累计境外输入人数
      curedCount		累计治愈人数
      deadCount		累计死亡人数
      seriousCount		现存无症状人数
      suspectedIncr		新增境外输入人数
      currentConfirmedIncr		相比昨天现存确诊人数
      confirmedIncr		相比昨天累计确诊人数
      curedIncr		相比昨天新增治愈人数
      deadIncr		相比昨天新增死亡人数
      seriousIncr		相比昨天现存无症状人数
    
      modifyTime     截止时间
    */
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.logo {
  position: relative;
  .select {
    position: absolute;
    right: 0.2rem;
    top: 0.3rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.1);
    padding: 0.1rem 0.2rem;
    border-radius: 0.2rem;
  }
}
.list {
  display: flex;
  padding-bottom: 0.2rem;
  > div {
    flex: 1;
    text-align: center;
    color: #666;
    img {
      width: 0.8rem;
      height: 0.8rem;
    }
  }
}

</style>
